<template>
  <div class="integral">
    <navBar :title="title"></navBar>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <van-tabs
        v-model="active"
        line-width="27px"
        line-height="2px"
        title-active-color="#16598B"
        color="#16598B"
        title-inactive-color="#303030"
        border
      >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getData"
      >
        <ul class="integralDetailedlist">
          <li
            class="integralDetailedlist_item"
            v-for="(item, index) in showData.list"
            :key="index"
          >
            <div class="integralDetailedlist_item_header">
              <span class="header_text">{{item.desc}}</span>
              <span
                :class="{'integral_number':true, 'isAdd': item.pay_points > 0}"
              >{{item.pay_points}}</span>
            </div>
            <div class="orderId"> {{item.order_sn ? '订单编号' + item.order_sn: ''}}</div>
            <div class="integralDetailedlist_item_bottom">
              <span>时间：</span>
              <span>{{$util.timeformat(item.change_time)}}</span>
            </div>
          </li>
        </ul>
      </van-list>
        <van-tab>
          <div slot="title" class="title">全部</div>
          <div slot="default">          
          </div>
        </van-tab>
        <van-tab>
          <div slot="title" class="title">支出</div>
          <div slot="default"></div>
        </van-tab>
        <van-tab>
          <div slot="title" class="title">收入</div>
          <div slot="default"></div>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Tab, Tabs, List, PullRefresh } from "vant";
Vue.use(Tab).use(Tabs).use(List).use(PullRefresh);
import navBar from "components/navBar";
export default {
  name: "integral",
  data() {
    return {
      title: "积分明细",
      active: 0,
      loading: false,
      dataList: {
        0: {
          list: [],
          page: {
            nowPage: 0
          }
        },
        1: {
          list: [],
          page: {
            nowPage: 0
          }
        },
        2: {
          list: [],
          page: {
            nowPage: 0
          }
        },
      }
    };
  },
  mounted(){
    this.getData()
  },
  computed: {
    showData(){
      return this.dataList[this.active]
    },
    finished(){
      if(this.showData.page.totalPages) {
        return this.showData.page.totalPages <= this.showData.page.nowPage
      }
      return false
    }
  },
  watch:{
    active(v) {
      if(this.dataList[v].list.length == 0) {
        this.getData()
      }
    }
  },
  components: {
    navBar
  },
  methods: {
    getData(){
      this.loading = true
      this.$store.dispatch('accountLog', {
        type: 2,
        in_out: this.active,
        p: this.showData.page.nowPage + 1
      }).then(res => {
        console.log('log', res.data.result)
        this.dataList[this.active].list = this.dataList[this.active].list.concat(res.data.result.list)
        this.dataList[this.active].page = res.data.result.page
        this.loading = false
      }).catch(err=>{
        this.loading = false
      })
    },
    onRefresh(){
      this.dataList[this.active] = {
        list: [],
        page: {
          nowPage: 0
        }
      }
      this.getData()
    },
    isDeduction(type) {
      const obj = {
        0: "钱包充值",
        1: "购买商品"
      };
      return obj[type];
    },
    isAdd(type) {
      const obj = {
        0: "-",
        1: "+"
      };
      return obj[type];
    }
  }
};
</script>
<style lang="less" rel="stylesheet/less" >
.integral {
  height: 100vh;
  background: rgba(247, 247, 247, 1);
  .title {
    font-size: 11px;
  }
  .van-tabs--line .van-tabs__wrap {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  }
  .integralDetailedlist {
    padding-left: 23px;
    background-color: #fff;
  }
  .integralDetailedlist_item {
    height: 98px;
    border-bottom: 1px solid #dbdbdb;
    &:last-child {
      border-bottom: none;
    }
    .integralDetailedlist_item_header {
      height: 43px;
      line-height: 50px;
      .header_text {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 48, 48, 1);
      }
      .integral_number {
        float: right;
        margin-right: 17px;
        font-size: 18px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: #6db533;
        &.isAdd {
          color: #e96e6e;
        }
      }
    }
    .orderId {
      font-size: 11px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
      margin-bottom: 6px;
    }
    .integralDetailedlist_item_bottom {
      font-size: 11px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
  }
}
</style>
